<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxDemo</title>
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
	<form id="form1" class="form-horizontal" action="AjaxDemoAction"
		method="post">
		<!-- 约定：form表单的那么属性值要与（对应实体类的属性名【数据库的字段名】）保持一致【大小写敏感】 -->

		<div class="form-group" style="margin-top: 100px;">
			<label class="col-sm-2 control-label col-sm-offset-2">用户名</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="txtUserName"
					name="adminname" placeholder="请输入用户名">
			</div>
			<label class="col-sm-2 control-label" id="userMsg"></label>
		</div>

		<div class="form-group" style="margin-top: 50px;">
			<div class="col-sm-2 col-sm-offset-5">
				<button type="button" class="btn btn-default"
					onclick="doAjaxQuery()">查询</button>
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-7">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>地址</th>
							<th>手机</th>
							<th>头像</th>
						</tr>
					</thead>
					<tbody id="displaytbody">

					</tbody>
				</table>
			</div>
		</div>

	</form>

	<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript"
		src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		// 使用jQuery进行ajax处理
		function doAjaxQuery() {
			// 使用jquery进行ajax请求处理
			$.ajax({
				type : "post", // 请求方式
				url : "AjaxQueryDemoAction", //请求的url地址
				data : $("#form1").serialize(), // 请求中发送的数据  ，通过serialize方法自动拼写表单中的数据串
				dataType : "json", //响应中发送过来的数据类型（默认text）

				// 执行成功之后的回调函数
				// result是服务器返回的数据
				success : function(result) {
					// 回调函数的DOM操作
					// 解析json数据
					console.info(result);
					/*
					 注意，如果返回数据为文本类型，需要将json字符串转为json对象
					each函数解析的是json对象，而不是json字符串
					 */
					// 解析拼写的html内容
					var strHtml = "";
					$.each(result, function(index, eachVal) {
						strHtml += "<tr>";

						strHtml += "<th scope='row'>";
						strHtml += (index + 1);
						strHtml += "</th>";

						strHtml += "<td>";
						strHtml += eachVal.adminname;
						strHtml += "</td>";

						strHtml += "<td>";
						strHtml += eachVal.adminaddress;
						strHtml += "</td>";

						strHtml += "<td>";
						strHtml += eachVal.admintel;
						strHtml += "</td>";
						
						strHtml+="<td>";
						strHtml+="<img src='";
						strHtml+=eachVal.adminimg;					
						strHtml+="' width='30px' height='30px'/>";
						strHtml+="</td>";
						
						strHtml += "</tr>";
					});

					// 把解析的html内容，使用dom操作赋值到表格中
					$("#displaytbody").html(strHtml);
				},
				error : function(result) {
					alert("请求失败" + result);
				}
			});
		}
	</script>
</body>
</html>